import React, {Component} from 'react';
import logo from './logo.svg';
import './App.css';

var count = 0;

//下面几个方法是创建组件的顺序
class App extends Component {
    /* 会报warning的错误，没有打印东西。下面两个方法是 React.createClass 时，可以设置的方法
    getDefaultProps() { //多个组件实例共享，只调用一次
        console.log("1. getDefaultProps");
        return {name: "DefaultUser"}
    }

    getInitialState() { // 一个组件调用一次
        console.log("2. getInitialState");
        return {mycount: count++,
                ready: false}
    }*/

    static defaultProps = { // ES6 的写法，代替 getDefaultProps
        name: "DefaultUser"
    }

    constructor(props) { // 代替 getInitialState
        console.log("2. getInitialState");
        super(props);
        this.state = {ready: false};
    }

    componentWillMount() { // 组件呈现在页面之前调用的方法
        console.log("3. componentWillMount")
    }

    render() {  // 渲染组件
        console.log("4. render");
        return (
            <div className="App">
                <header className="App-header">
                    <img src={logo} className="App-logo" alt="logo"/>
                    <h1 className="App-title">Welcome to React</h1>
                </header>
                <p className="App-intro">
                    {this.props.name},
                    To get started, edit <code>src/App.js</code> and save to reload.
                </p>
            </div>
        );
    }

    componentDidMount() { // 组件渲染在页面上之后调用的方法
        console.log("5. componentDidMount");
        //$(React.findDOMNode(this)).append("  after ")
    }

}

export default App;
